
<style type="text/css">
    .fl {
        float: left;
    }
    .new_task.Rt_task .uploadImg_list li img{
        width: 100%;
        height: 100%;
    }
    .addTask .task_line .Rt_task .addImg
   {
        padding-top: 20px;
    }
    .new_task.Rt_task .uploadImg_list li  {
        float: left;
        width: 100px;
        height: 100px;
        margin-right: 20px;
        position: relative;
    }
   .new_task.Rt_task .uploadImg_list li img {
        width: 100%;
        height: 100%;
    }
    img {
        padding: 0;
        margin: 0;
        vertical-align: top;
        border: none;
    }

    .new_task.Rt_task .addImg{
        background: url(${ctxPath}/static/img/Group100.png) no-repeat;
        width: 100px;
        height: 100px;
        position: relative;
    }
    .x_delete {
        display: inline-block;
        background: url(${ctxPath}/static/img/Group101.png) no-repeat;
        width: 14px;
        height: 14px;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        z-index: 10;
    }
    .file {
        cursor: pointer;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        position: absolute;
    }
</style>

<div class="Rt_task new_task clearfix">
    <input type="hidden" id="${id}" data-type="imgupload" name="${name}"  value="${value!''}"  class="form-control"/>
    <ul id="${id}_uploadImg_list" class="uploadImg_list fl" style="margin-bottom: 0px; margin-left: 0px;">
    </ul>
    <div class="addImg fl">
        <input class="file img_${id}" type="file" />
    </div>
</div>
<script type="text/javascript">
   $(function(){
       var s=${manual!'1'}
       if(s!=1){
        var id=$("#${id}").val();
           $("#${id}_uploadImg_list").empty();
           var html="";
           if(id==null||id==""){
               return;
           }
           var p= id.split(",");
           $.each(p,function(i,d){
               html+='<li><img class="imgs_${id}" src="'+d+'"/><span class="x_delete" onclick="deleteByPic(this)"></span></li>';
           })
           $("#${id}_uploadImg_list").append(html);
       }
   })


    function deleteByPic(t){
        $(t).parent("li").remove();
        changeInput${id}();
    }
    //更新数据
    function changeInput${id}(){
        var c="imgs_${id}";
        var p=[];
        $("."+c).each(function(i,d){
            console.log(d);
            var url= $(this).attr("src");
            p.push(url);
        })
        console.log(p);
        if(p!=null){
            var urls =p.join(",");
            $("#${id}").val(urls);
        }
    }

    $(".img_${id}").change(function(){
        var file = this.files[0];
        var url ="${ctxPath}/kindeditor/upload_json"
        var data=new FormData();
        data.append('imgFile',file);
        console.log(file);
        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            dataType:'json',
            cache: false, // 不缓存
            processData: false,
            contentType: false
        }).done(function(ret){
            if (ret) {
                initImgsUploads${id}(ret.url)
            }else{
                alert("上传失败")
            }
        });


    function initImgsUploads${id}(url){
        var _model='<li><img class="imgs_${id}" src="'+url+'"/><span class="x_delete" onclick="deleteByPic(this)"></span></li>';
        if(${multi!'false'}==true){
            $("#${id}_uploadImg_list").append(_model);
        }else{
            $("#${id}_uploadImg_list").empty();
            $("#${id}_uploadImg_list").append(_model);
        }
        changeInput${id}();
    }})
   //编辑的时候会调用该方法 id代表值
   function initImgUpload(id){
       $("#${id}_uploadImg_list").empty();
       var html="";
       if(id==null||id==""){
           return;
       }
       var p= id.split(",");
       $.each(p,function(i,d){
           html+='<li><img class="imgs_${id}" src="'+d+'"/><span class="x_delete" onclick="deleteByPic(this)"></span></li>';
       })
       $("#${id}_uploadImg_list").append(html);
       changeInput${id}();
   }


</script>